<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery1.8/jquery-1.8.0.min.js"></script>
<title>Insert title here</title>
<script src="js/ops.js" type="text/javascript"></script>
    <link href="css/UserCSS.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery3.min.js" type="text/javascript"></script>
<style type="text/css">
	.content{
		text-align:center;
		font-family:'宋体';
		height: 60px;
	}
	span{
		color: gray;
	}
	label{
		font-size: 16px;
		color:saddlebrown;
	}
	input{
		width: 150px;
		height: 20px;
		font-size: 16px;
		margin-bottom: 3px;
	}
	.button{
		color:brown;
		width:49px;
		height: 24px;
		font-size: 14px;
	}

</style>
</head>
<body>
    <div class="row" style="margin-top: 10px;">
    </div>
    <div class="row">
        <div class="u-menu">
            <ul class="u-nav" id="user_menu">
                <li class="item" id="user_menu_my" name="user_menu_my">
                    <h3 class="t1">
                               我的个人中心<span title="折叠"></span></h3>
                    <ul class="sub">
                        <!-- <li><a href="个人主页.jsp">个人主页</a></li> -->
                        <li><a href="个人资料.jsp">个人资料</a></li>
                        <li><a href="认证管理.jsp">认证管理</a></li>
                        <li><a class="current" href="密码管理.jsp">密码设置</a></li>
                    </ul>
                </li>
                 <li class="item" id="user_menu_loan" name="user_menu_loan">
                    <h3 class="t3">贷款管理<a name="user_login"></a><span title="折叠"></span></h3>
                    <ul class="sub">
                            <li><a href="queryRetmsgInfo.do">我的贷款</a></li>
                            <li><a href="queryRepaymentInfo.do?nper=${Nper }">偿还贷款</a></li>
                            <li><a href="LoanStatistics.do">贷款统计</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var menuClosed = Ops.getCookie('menuClosed');
            $(".item h3 span").click(function () {
                menuClosed = Ops.getCookie('menuClosed');
                if (menuClosed == undefined || menuClosed == null) {
                    menuClosed = '';
                    Ops.setCookie('menuClosed', menuClosed);
                }
                //console.log(menuClosed+',click;;;');	
                $(this).parent().parent().toggleClass('bg-slide');
                $(this).parent().parent().find(".sub").slideToggle('fast');

                if ($(this).attr('title') == '折叠') {
                    $(this).attr('title', '展开');
                } else {
                    $(this).attr('title', '折叠');
                }
                var pid = $(this).parent().parent().attr('id');

                if ($(this).parent().parent().hasClass('bg-slide') && menuClosed.indexOf("#" + pid + "#") == -1) {
                    var cookies = menuClosed + '#' + pid + '#';
                } else {
                    var cookies = menuClosed.replace("#" + pid + "#", '');
                }
                Ops.setCookie('menuClosed', cookies);
            });
            if (menuClosed != null) {
                var closedMatch = menuClosed.match(/([a-z_]+)/g);
                for (var i in closedMatch) {
                    var idObj = $('#' + closedMatch[i]);
                    idObj.toggleClass('bg-slide');
                    idObj.find(".sub").hide();
                    idObj.find('h3 span').attr('title', '展开');
                }
            } else {
                $("#user_menu_loan h3 span").click();
            }
        </script>
        
        <div class="u-main">
            <div id="tab_menu">
                <ul class="u-tab clearfix"><li class="current"><a>登陆密码</a></li></ul>
            </div>
            <div id="tab_box">
                <div class="u-form-wrap">                 
                    <div class="content" style="height: 70px;font-family:'宋体';text-align:center;">
                    	<h2 style="color: blue;">修改密码</h2>
                    </div>
                    
                    <div class="content" style="height: 50px;">
                    	<label>用户名：</label>
                    	<input type="text" readonly= "readonly" value="${userInfo.u_name}" id="u_name" style="border: 0px;"><br>
                    </div>
                    
                    <div class="content">
                    	<label>输入旧密码：</label>
                    	<input type="password" id="u_password" onblur="isNoPW1()"><br>
                    	<span id="msg1">密码由6位的中英文组成</span>
                    </div>
                    
                    <div class="content">
                    	<label>输入新密码：</label>
                    	<input type="password" id="u_newpassword1" onblur="isNoPW2()"><br>
                    	<span id="msg2">密码由6位的中英文组成，两次输入需一致</span>
                    </div>
                    
                    <div class="content" style="margin-bottom: 40px;">
                    	<label>确认新密码：</label>
                    	<input type="password" id="u_newpassword2" onblur="isNoPW3()"><br>
                    	<span id="msg3">密码由6位的中英文组成，两次输入需一致</span>
                    </div>
                    
                    <div style="text-align:center;">
                    	<input class="button" type="button" value="确定" id="affirm"/>
                    	<input class="button" type="button" value="取消" id="cancel"/><br>
                    	<span id="msg4">&nbsp;</span><br>
                    </div>
                    
                </div>              
            </div>
        </div>
		<script type="text/javascript">
		//判定密码格式是否正确
		var a=false;
		var b=false;
		var c=false;
		
		function isNoPW1(){  
			var password = /^[a-zA-Z0-9]{6,6}$/; //长度为6,必须中英文组合
			var content = $("#u_password").val();
	        if(!password.test(content)){
	    	    $("#msg1").html("*输入格式有误");
				$("#msg1").css("color","red"); 
				a=false;
	        }else{
	    	    $("#msg1").html("密码由6位的中英文组成");
				$("#msg1").css("color","gray"); 
				a = true;
	        }
		}
		function isNoPW2(){  
			var password = /^[a-zA-Z0-9]{6,6}$/; //长度为6,必须中英文组合
			var content = $("#u_newpassword1").val();
	        if(!password.test(content)){
	    	    $("#msg2").html("*输入格式有误");
				$("#msg2").css("color","red"); 
				b=false;
	        }else{
	    	    $("#msg2").html("密码由6位的中英文组成，两次输入需一致");
				$("#msg2").css("color","gray"); 
				b = true;
	        }
		}
		function isNoPW3(){  
			var password = /^[a-zA-Z0-9]{6,6}$/; //长度为6,必须中英文组合
			var content = $("#u_newpassword2").val();
	        if(!password.test(content)){
	    	    $("#msg3").html("*输入格式有误");
				$("#msg3").css("color","red"); 
				c=false;
	        }else{
	    	    $("#msg3").html("密码由6位的中英文组成，两次输入需一致");
				$("#msg3").css("color","gray"); 
				c=true;
	        }
		}

		//点击取消跳转至个人资料页面
		$(function(){
			$("#cancel").click(function(){
				location.href="<%=basePath%>个人资料.jsp";
			});
		});
		
		//点击确认，查询输入的旧密码是否正确
		$(function() {
			$("#affirm").click(function() {
				if(a==true&&b==true&&c==true){
					$("#msg4").html("&nbsp;");
					$("#msg4").css("color","white");
					var newpassword1=$("#u_newpassword1").val();
					var newpassword2=$("#u_newpassword2").val();
					if(newpassword1==newpassword2){
						$("#msg4").html("&nbsp;");
						$("#msg4").css("color","white");
						$.ajax({
							data:{"u_name":$("#u_name").val(),"pwd":$("#u_password").val(),"newpassword":newpassword1},
							type:"post",
							url:"<%=basePath%>updatePasswordByName.do",
							dataType:"json",
							cache:false,
							success:function(data){
								if(data.result=="errorPassword"){
									$("#msg1").html("密码输入错误！");
									$("#msg1").css("color","red"); 
								}else {
									$("#msg1").html("密码由6位的中英文组成");
									$("#msg1").css("color","gray"); 
									if(data.result=="ok"){
										alert("密码修改成功！");
										location.href="<%=basePath%>个人资料.jsp";
									}else{
										alert("密码修改失败！");
									}
								}
							},
							error:function(){
								alert("失败!");
							}
						});
					}else{
						$("#msg4").html("新密码两次输入不一致");
						$("#msg4").css("color","red");
					}
				}else{
					$("#msg4").html("输入信息有误");
					$("#msg4").css("color","red"); 
				}	
			});
		});
		</script>
    </div>
</body>
</html>